import React, { useEffect, useState } from "react";
import { Space, Table, Tag, Button, Form, Input, Col, Row, Select } from "antd";
import styles from "./index.module.scss";

export default function MyTable(props) {
  // props
  /**
   * 1、props的固定属性
   *  1)columns 数组 表头
   *  2）data 数据
   *  3）查询条件searchList
   */
  const { columns = [], data = [] } = props;
  const [searchList, setSearchList] = useState(props.searchList);
  const [value, setvalue] = useState(props.searchList);
  // 处理查询条件，并返回给父组件
  const handleFilter = () => {
    let searchData = {};
    for (let i = 0; i < searchList.length; i++) {
      let data = searchList[i];
      searchData[data["key"]] = data[data["key"]];
    }
    console.log("first", searchList);
    props.handleFilter(searchData);
  };
  const handleClier = () => {
    let newSearchList = searchList.map((item) => ({
      ...item,
      [item["key"]]: "", // 更新指定键的值为""
    }));
    setSearchList(newSearchList);
    handleFilter();
  };
  //将查询条件渲染到页面上
  const handleShear = (data, index) => {
    return (
      <Col span={5} key={data.key}>
        <Form.Item label={data.text} name={data.key}>
          {searchType(data, index)}
        </Form.Item>
      </Col>
    );
  };
  //   判断当前查询条件类型
  const searchType = (data, index) => {
    if (data.type === "input") {
      return (
        // <div>
        //   {data[data['key']]}
        // </div>
        <Input
          value={data[data["key"]]}
          onChange={(e) => {
            inputChange(e, data, index);
          }}
          style={{
            textAlign: "left",
            height: "36px",
          }}
          placeholder={data[data["key"]]}
        />
      );
    } else if (data.type === "select") {
      return (
        // <div>
        //   {data[data['key']]}
        // </div>
        <Select
          value={value}
          onChange={(value) => {
            selectChange(value, data, index);
          }}
          options={data.options}
          style={{
            textAlign: "left",
            height: "36px",
          }}
        />
      );
    }
  };
  // useEffect(() => {
  //   console.log("useEffect", searchList);
  // }, searchList);
  //   当搜索数据发生改变是调用，双向数据绑定
  const inputChange = (e, data, index) => {
    // data[data["key"]] = e.target.value; //这样第一次可以获取数据，再次点击搜索会丢失数据
    searchList[index][data["key"]] = e.target.value;
    setSearchList(searchList);
  };
  const selectChange = (value, data, index) => {
    searchList[index][data["key"]] = value;
    setSearchList(searchList);
  };


  return (
    <div className={styles.myTable}>
      {/* 搜索条件区域 */}
      <Form
        name="wrap"
        labelCol={{ flex: "110px" }}
        labelAlign="right"
        labelWrap
        colon={false}
        style={{}}
        className={styles.marB24}
      >
        <Row>
          {searchList.map((item, index) => {
            return handleShear(item, index);
          })}
          {/* {searchList.map(item=>item[item['key']])} */}
          <Col span={4} style={{ textAlign: "center" }}>
            <Button type="primary" onClick={handleFilter}>
              搜索
            </Button>
            <Button
              type="primary"
              onClick={handleClier}
              style={{ marginLeft: "10px" }}
            >
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      {/* rowSelection={rowSelection} */}
      <Table columns={columns} dataSource={data} />
    </div>
  );
}
